import { useState } from "react";
import "./App.css";
import { ClassDemo } from "./views/classDemo/index";

function Child({ count }) {
  return (
    <div>
      <h2>我是子组件</h2>
      <p>{count}</p>
    </div>
  );
}

function App() {
  const [count, setCount] = useState(0);

  const [currentIndex, setCurrentIndex] = useState(0);

  const classObj = {
    box: true,
    box2: false,
  };

  const changeCount = () => {
    console.log("11112");
    setCount(count + 1);
  };

  const handleItem = (item) => {
    console.log(
      "%c [ item ]-23",
      "font-size:13px; background:pink; color:#bf2c9f;",
      item
    );
    setCurrentIndex(item);
  };

  let data;
  if (count === 5) {
    data = <h1>hello data</h1>;
  } else {
    data = <h1>hi data</h1>;
  }

  const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  const [listData, setListData] = useState(list);

  return (
    <>
      <ClassDemo></ClassDemo>
      <button onClick={changeCount}>{count}</button>

      <div className="box "></div>

      {/* 条件判读 */}
      {count === 5 && <h1>hello</h1>}
      {count > 3 ? <h1>hello2</h1> : <h1>hi</h1>}
      {data}

      {/* 列表渲染 */}
      <ul>
        {listData.map((item, index) => (
          <div
            key={index}
            className={`item ${index === currentIndex ? "active" : ""}`}
            onClick={() => handleItem(index)}
          >
            <span>{item}</span>
            <span>--{index}</span>
          </div>
        ))}
      </ul>
      {/* 支持传递各种数据 */}
      <Child count={count}></Child>
    </>
  );
}

export default App;
